<template>
  <div class="main-page">
    <div class="page-title">
      <span>房地产监测预警驾驶舱</span>
    </div>
    <div class="main-content">
      <el-row :gutter="30" style="height: calc(100vh - 102px)">
        <!-- 左 -->
        <el-col :span="8">
          <div class="house-trade-situation-analysis-forecast">
            <div class="main-content-gird-title">
              <img class="main-content-gird-title-logo" src="@/assets/img/housePropertyAnalysis/statistics/module-title-logo.png" alt="" />
              <p>商品房交易情况分析预测</p>
            </div>
            <public-change-province-city
              :cityList="mapList"
              :currentCity="cityConfig.houseTradeSituationAnalysisForecast"
              @changeCity="(event) => changeCity(event, 'houseTradeSituationAnalysisForecast')"
            />
            <div class="module-title-content-middle-line"></div>
            <el-row :gutter="10">
              <el-col :span="24">
                <el-row :gutter="10">
                  <el-col :span="12">
                    <div class="house-trade-situation-analysis-forecast-left-top">
                      <div class="house-trade-situation-analysis-forecast-left-top-title public-chart-title">
                        <span style="font-size: 16px">商品房交易面积走势</span>
                      </div>
                      <div class="house-trade-situation-analysis-forecast-top-chart">
                        <double-line
                          v-if="wholeProvinceHouseAveragePriceTrend1?.xAxisData?.length"
                          ref="wholeProvinceHouseAveragePriceTrendDomRef"
                          :lineData="wholeProvinceHouseAveragePriceTrend1"
                          class="h200"
                          @click="fullSc('doubleLine', wholeProvinceHouseAveragePriceTrend1)"
                        ></double-line>
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="house-trade-situation-analysis-forecast-right-top">
                      <div class="house-trade-situation-analysis-forecast-right-top-title public-chart-title">
                        <span style="font-size: 16px">商品房交易总金额走势</span>
                      </div>
                      <div class="house-trade-situation-analysis-forecast-top-chart">
                        <double-line
                          v-if="wholeProvinceHouseAveragePriceTrend2?.xAxisData?.length"
                          ref="wholeProvinceHouseAveragePriceTrendDomRef"
                          :lineData="wholeProvinceHouseAveragePriceTrend2"
                          class="h200"
                          @click="fullSc('doubleLine', wholeProvinceHouseAveragePriceTrend2)"
                        ></double-line>
                      </div>
                    </div>
                  </el-col>
                </el-row>
                <el-row :gutter="10">
                  <el-col :span="12">
                    <div class="house-trade-situation-analysis-forecast-left-top">
                      <div class="house-trade-situation-analysis-forecast-left-top-title public-chart-title">
                        <span style="font-size: 16px">商品房交易量走势</span>
                      </div>
                      <div class="house-trade-situation-analysis-forecast-top-chart">
                        <double-line
                          v-if="wholeProvinceHouseAveragePriceTrend3?.xAxisData?.length"
                          ref="wholeProvinceHouseAveragePriceTrendDomRef"
                          :lineData="wholeProvinceHouseAveragePriceTrend3"
                          class="h200"
                          @click="fullSc('doubleLine', wholeProvinceHouseAveragePriceTrend3)"
                        ></double-line>
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="house-trade-situation-analysis-forecast-right-top">
                      <div class="house-trade-situation-analysis-forecast-right-top-title public-chart-title">
                        <span style="font-size: 16px">商品房均价走势</span>
                      </div>
                      <div class="house-trade-situation-analysis-forecast-top-chart">
                        <double-line
                          v-if="wholeProvinceHouseAveragePriceTrend4?.xAxisData?.length"
                          ref="wholeProvinceHouseAveragePriceTrendDomRef"
                          :lineData="wholeProvinceHouseAveragePriceTrend4"
                          class="h200"
                          @click="fullSc('doubleLine', wholeProvinceHouseAveragePriceTrend4)"
                        ></double-line>
                      </div>
                    </div>
                  </el-col>
                </el-row>
                <el-row :gutter="10">
                  <el-col :span="12">
                    <div class="house-trade-situation-analysis-forecast-bottom">
                      <div class="house-trade-situation-analysis-forecast-bottom-title public-chart-title">
                        <span style="font-size: 16px">商品房交易量走势分析预测</span>
                      </div>
                      <div class="house-trade-situation-analysis-forecast-bottom-chart">
                        <line-with-mark-area
                          v-if="houseBusinessVolumeTrendAnalysisForecast.xAxisData?.length"
                          ref="houseBusinessVolumeTrendAnalysisForecastDomRef"
                          :lineData="houseBusinessVolumeTrendAnalysisForecast"
                          class="h200"
                          @click="fullSc('lineWithMarkArea', houseBusinessVolumeTrendAnalysisForecast)"
                        ></line-with-mark-area>
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="house-trade-situation-analysis-forecast-bottom">
                      <div class="house-trade-situation-analysis-forecast-bottom-title public-chart-title">
                        <span style="font-size: 16px">商品房均价走势分析预测</span>
                      </div>
                      <div class="house-trade-situation-analysis-forecast-bottom-chart">
                        <line-with-mark-area
                          v-if="houseAveragePriceTrendAnalysisForecast.xAxisData?.length"
                          ref="houseAveragePriceTrendAnalysisForecastDomRef"
                          :lineData="houseAveragePriceTrendAnalysisForecast"
                          class="h200"
                          @click="fullSc('lineWithMarkArea', houseAveragePriceTrendAnalysisForecast)"
                        ></line-with-mark-area>
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <!-- 中 -->
        <el-col :span="8" style="padding-left: 0; padding-right: 0">
          <el-row>
            <el-col :span="24" style="position: relative">
              <div class="middle-map">
                <map-box :listData="mapList" :mapConfig="{ layoutSize: '105%' }" @mapNameChange="mapNameChange"></map-box>
                <div class="map-address">辽宁省{{ cityObj.name ? `-${cityObj.name}` : "" }}</div>
              </div>
              <div class="marco-economy-to-house-impact-analysis">
                <div class="main-content-gird-title">
                  <img class="main-content-gird-title-logo" src="@/assets/img/housePropertyAnalysis/statistics/module-title-logo.png" alt="" />
                  <p>宏观经济指标对房屋影响分析</p>
                </div>
                <public-change-province-city
                  :cityList="mapList"
                  :currentCity="cityConfig.macroEconomyToHouseImpactAnalysis"
                  @changeCity="(event) => changeCity(event, 'macroEconomyToHouseImpactAnalysis')"
                />
                <div class="module-title-content-middle-line"></div>
                <el-row :gutter="10">
                  <el-col :span="12">
                    <div class="marco-economy-to-house-impact-analysis-content">
                      <div class="marco-economy-to-house-impact-analysis-content-title public-chart-title">
                        <span>宏观经济指标与房屋均价关系</span>
                      </div>
                      <div class="marco-economy-to-house-impact-analysis-content-tabs">
                        <el-tabs
                          v-model="macroEconomyToHouseAveragePriceConnection.currentTab"
                          @tab-change="changeMarcoEconomyToHouseImpactAnalysisTab('left')"
                        >
                          <el-tab-pane
                            v-for="(item, index) of marcoEconomyToHouseImpactAnalysisTabs"
                            :key="item.id"
                            :label="item.label"
                            :name="item.id"
                          ></el-tab-pane>
                        </el-tabs>
                      </div>
                      <div class="marco-economy-to-house-impact-analysis-content-chart">
                        <double-line
                          v-if="macroEconomyToHouseAveragePriceConnection.xAxisData?.length"
                          ref="macroEconomyToHouseAveragePriceConnectionDomRef"
                          :lineData="macroEconomyToHouseAveragePriceConnection"
                          class="h145"
                          @click="fullSc('doubleLine', macroEconomyToHouseAveragePriceConnection)"
                        ></double-line>
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="marco-economy-to-house-impact-analysis-content">
                      <div class="marco-economy-to-house-impact-analysis-content-title public-chart-title">
                        <span>宏观经济指标与房屋交易量关系</span>
                      </div>
                      <div class="marco-economy-to-house-impact-analysis-content-tabs">
                        <el-tabs
                          v-model="macroEconomyToHouseBusinessVolumeConnection.currentTab"
                          @tab-change="changeMarcoEconomyToHouseImpactAnalysisTab('right')"
                        >
                          <el-tab-pane
                            v-for="(item, index) of marcoEconomyToHouseImpactAnalysisTabs"
                            :key="item.id"
                            :label="item.label"
                            :name="item.id"
                          ></el-tab-pane>
                        </el-tabs>
                      </div>
                      <div class="marco-economy-to-house-impact-analysis-content-chart">
                        <double-line
                          v-if="macroEconomyToHouseBusinessVolumeConnection.xAxisData?.length"
                          ref="macroEconomyToHouseBusinessVolumeConnectionDomRef"
                          :lineData="macroEconomyToHouseBusinessVolumeConnection"
                          class="h145"
                          @click="fullSc('doubleLine', macroEconomyToHouseBusinessVolumeConnection)"
                        ></double-line>
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>
              <div class="marco-economy-to-house-property-market">
                <div class="main-content-gird-title">
                  <img class="main-content-gird-title-logo" src="@/assets/img/housePropertyAnalysis/statistics/module-title-logo.png" alt="" />
                  <p>宏观经济指标对房地产市场影响预期变动分析</p>
                </div>
                <public-change-province-city
                  :cityList="mapList"
                  :currentCity="cityConfig.macroEconomyToHousePropertyMarket"
                  @changeCity="(event) => changeCity(event, 'macroEconomyToHousePropertyMarket')"
                />
                <div class="module-title-content-middle-line"></div>
                <div class="marco-economy-to-house-property-market-top-operation">
                  <div
                    class="marco-economy-to-house-property-market-top-operation-item"
                    v-for="(item, index) of macroEconomyToHousePropertyMarketTopInfo"
                    :key="index"
                  >
                    <div class="marco-economy-to-house-property-market-top-operation-item__label">{{ item.label }}</div>
                    <div class="marco-economy-to-house-property-market-top-operation-item__content">
                      <el-input-number
                        v-model="item.value"
                        :min="item.min"
                        :step="item.step"
                        :precision="2"
                        controls-position="right"
                        size="small"
                        @change="changeInputNumber($event, index)"
                      />
                      <span>{{ item.unit }}</span>
                    </div>
                  </div>
                  <div class="marco-economy-to-house-property-market-top-operation-btn">
                    <div @click="handleMacroEconomyOperation">重置</div>
                  </div>
                </div>
                <el-row :gutter="10">
                  <el-col :span="12">
                    <div class="marco-economy-to-house-property-market-left-title public-chart-title">
                      <span>房屋均价走势预测分析</span>
                    </div>
                    <div class="marco-economy-to-house-property-market-chart">
                      <line-with-mark-area-macro-economy
                        v-if="houseAveragePriceTrendForecastAnalysis.xAxisData?.length"
                        ref="houseAveragePriceTrendForecastAnalysisDomRef"
                        :lineData="houseAveragePriceTrendForecastAnalysis"
                        class="h100"
                        @click="fullSc('lineWithMarkAreaMacroEconomy', houseAveragePriceTrendForecastAnalysis)"
                      />
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="marco-economy-to-house-property-market-right-title public-chart-title">
                      <span>房屋交易量走势预测分析</span>
                    </div>
                    <div class="marco-economy-to-house-property-market-chart">
                      <line-with-mark-area-macro-economy
                        v-if="houseBusinessVolumeTrendForecastAnalysis.xAxisData?.length"
                        ref="houseBusinessVolumeTrendForecastAnalysisDomRef"
                        :lineData="houseBusinessVolumeTrendForecastAnalysis"
                        class="h100"
                        @click="fullSc('lineWithMarkAreaMacroEconomy', houseBusinessVolumeTrendForecastAnalysis)"
                      />
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
        </el-col>
        <!-- 右 -->
        <el-col :span="8">
          <div class="house-trade-situation-analysis-forecast">
            <div class="main-content-gird-title">
              <img class="main-content-gird-title-logo" src="@/assets/img/housePropertyAnalysis/statistics/module-title-logo.png" alt="" />
              <p>二手房交易情况分析预测</p>
            </div>
            <public-change-province-city
              :cityList="mapList"
              :currentCity="cityConfig.houseTradeSituationAnalysisForecastR"
              @changeCity="(event) => changeCity(event, 'houseTradeSituationAnalysisForecastR')"
            />
            <div class="module-title-content-middle-line"></div>
            <el-col :span="24">
              <el-row :gutter="10">
                <el-col :span="12">
                  <div class="house-trade-situation-analysis-forecast-left-top">
                    <div class="house-trade-situation-analysis-forecast-left-top-title public-chart-title">
                      <span style="font-size: 16px">二手房交易面积走势</span>
                    </div>
                    <div class="house-trade-situation-analysis-forecast-top-chart">
                      <double-line
                        v-if="wholeProvinceHouseAveragePriceTrendR1?.xAxisData?.length"
                        ref="wholeProvinceHouseAveragePriceTrendDomRef"
                        :lineData="wholeProvinceHouseAveragePriceTrendR1"
                        class="h200"
                        @click="fullSc('doubleLine', wholeProvinceHouseAveragePriceTrendR1)"
                      ></double-line>
                    </div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="house-trade-situation-analysis-forecast-right-top">
                    <div class="house-trade-situation-analysis-forecast-right-top-title public-chart-title">
                      <span style="font-size: 16px">二手房交易总金额走势</span>
                    </div>
                    <div class="house-trade-situation-analysis-forecast-top-chart">
                      <double-line
                        v-if="wholeProvinceHouseAveragePriceTrendR2?.xAxisData?.length"
                        ref="wholeProvinceHouseAveragePriceTrendDomRef"
                        :lineData="wholeProvinceHouseAveragePriceTrendR2"
                        class="h200"
                        @click="fullSc('doubleLine', wholeProvinceHouseAveragePriceTrendR2)"
                      ></double-line>
                    </div>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="12">
                  <div class="house-trade-situation-analysis-forecast-left-top">
                    <div class="house-trade-situation-analysis-forecast-left-top-title public-chart-title">
                      <span style="font-size: 16px">二手房交易量走势</span>
                    </div>
                    <div class="house-trade-situation-analysis-forecast-top-chart">
                      <double-line
                        v-if="wholeProvinceHouseAveragePriceTrendR3?.xAxisData?.length"
                        ref="wholeProvinceHouseAveragePriceTrendDomRef"
                        :lineData="wholeProvinceHouseAveragePriceTrendR3"
                        class="h200"
                        @click="fullSc('doubleLine', wholeProvinceHouseAveragePriceTrendR3)"
                      ></double-line>
                    </div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="house-trade-situation-analysis-forecast-right-top">
                    <div class="house-trade-situation-analysis-forecast-right-top-title public-chart-title">
                      <span style="font-size: 16px">二手房均价走势</span>
                    </div>
                    <div class="house-trade-situation-analysis-forecast-top-chart">
                      <double-line
                        v-if="wholeProvinceHouseAveragePriceTrendR4?.xAxisData?.length"
                        ref="wholeProvinceHouseAveragePriceTrendDomRef"
                        :lineData="wholeProvinceHouseAveragePriceTrendR4"
                        class="h200"
                        @click="fullSc('doubleLine', wholeProvinceHouseAveragePriceTrendR4)"
                      ></double-line>
                    </div>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="12">
                  <div class="house-trade-situation-analysis-forecast-bottom">
                    <div class="house-trade-situation-analysis-forecast-bottom-title public-chart-title">
                      <span style="font-size: 16px">二手房交易量走势分析预测</span>
                    </div>
                    <div class="house-trade-situation-analysis-forecast-bottom-chart">
                      <line-with-mark-area
                        v-if="wholeProvinceHouseAveragePriceTrendR5?.xAxisData?.length"
                        ref="wholeProvinceHouseAveragePriceTrendDomRef"
                        :lineData="wholeProvinceHouseAveragePriceTrendR5"
                        class="h200"
                        @click="fullSc('lineWithMarkArea', wholeProvinceHouseAveragePriceTrendR5)"
                      ></line-with-mark-area>
                    </div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="house-trade-situation-analysis-forecast-bottom">
                    <div class="house-trade-situation-analysis-forecast-bottom-title public-chart-title">
                      <span style="font-size: 16px">二手房均价走势分析预测</span>
                    </div>
                    <div class="house-trade-situation-analysis-forecast-bottom-chart">
                      <line-with-mark-area
                        v-if="wholeProvinceHouseAveragePriceTrendR6?.xAxisData?.length"
                        ref="wholeProvinceHouseAveragePriceTrendDomRef"
                        :lineData="wholeProvinceHouseAveragePriceTrendR6"
                        class="h200"
                        @click="fullSc('lineWithMarkArea', wholeProvinceHouseAveragePriceTrendR6)"
                      ></line-with-mark-area>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </el-col>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-dialog v-model="magnifyData.dialogVisible" :width="magnifyData.dialogWidth" :top="magnifyData.dialogTop">
      <component
        v-if="magnifyData.dialogVisible"
        ref="dialogRef"
        :is="magnifyData.componentName"
        :dialogData="{
          fontSizeTimes: 2,
        }"
        v-bind="{ ...magnifyData.props }"
      ></component>
    </el-dialog>
  </div>
</template>

<script>
import singleLine from "@/components/housePropertyAnalysisAndForecast/singleLine.vue";
import bar from "@/components/housePropertyAnalysisAndForecast/bar.vue";
import lineWithMarkArea from "@/components/housePropertyAnalysisAndForecast/lineWithMarkArea.vue";
import doubleLine from "@/components/housePropertyAnalysisAndForecast/doubleLine.vue";
import lineWithMarkAreaMacroEconomy from "@/components/housePropertyAnalysisAndForecast/lineWithMarkAreaMacroEconomy.vue";
import pie from "@/components/housePropertyAnalysisAndForecast/pie.vue";

export default {
  components: {
    singleLine,
    bar,
    lineWithMarkArea,
    doubleLine,
    lineWithMarkAreaMacroEconomy,
    pie,
  },
};
</script>
<script setup>
import publicChangeProvinceCity from "@/components/projectMonitoringAnalysis/publicChangeProvinceCity.vue";
import mapBox from "@/components/housePropertyAnalysisAndForecast/map.vue";
import { onBeforeMount, onMounted, ref, nextTick, inject } from "vue";
import {
  selectTwoBuildInfo, // 二手房交易情况分析预测
  transactionAnalysisAveragePriceTrend, // 房地产监测预警驾驶舱-商品房交易面积走势-line
  transactionAnalysisAveragePriceForecast, // 房地产监测预警驾驶舱-商品房均价走势分析预测-line
  transactionAnalysisTradingVolumeForecast, // 房地产监测预警驾驶舱-商品房交易量走势分析预测-line
  macroeconomicIndicatorsHousing, // 房地产监测预警驾驶舱-宏观经济指标对房屋影响分析-宏观经济指标与房屋均价关系-line
  macroeconomicTransactionHousing, // 房地产监测预警驾驶舱-宏观经济指标对房屋影响分析-宏观经济指标与房屋交易量关系-line
  macroeconomicImpact, // 宏观经济指标对房地产市场影响预期变动分析-房屋均价走势预测分析-line
  macroeconomicImpactTradingVolume, // 宏观经济指标对房地产市场影响预期变动分析-房屋交易量走势预测分析-line
  defaultParameterSEachLevel, // 宏观经济指标对房地产市场影响预期变动分析-宏观经济指标对房地产市场影响预期变动分析-获取顶部筛选模块默认展示值
} from "@/api/housePropertyAnalysisAndForecast/index";
import useDebounce from "@/hooks/useDebounce/useDebounce";

const echarts = inject("echarts");
const currentYear = ref(null); // 当前年
const currentMonth = ref(null); // 当前月
const cityObj = ref({
  name: "",
  code: "",
}); // 地图-城市code信息
const mapList = ref([
  { name: "沈阳市", value: 0, code: "210100", select: { disabled: false }, selected: false },
  { name: "大连市", value: 0, code: "210200", select: { disabled: false }, selected: false },
  { name: "鞍山市", value: 0, code: "210300", select: { disabled: false }, selected: false },
  { name: "抚顺市", value: 0, code: "210400", select: { disabled: false }, selected: false },
  { name: "本溪市", value: 0, code: "210500", select: { disabled: false }, selected: false },
  { name: "丹东市", value: 0, code: "210600", select: { disabled: false }, selected: false },
  { name: "锦州市", value: 0, code: "210700", select: { disabled: false }, selected: false },
  { name: "营口市", value: 0, code: "210800", select: { disabled: false }, selected: false },
  { name: "阜新市", value: 0, code: "210900", select: { disabled: false }, selected: false },
  { name: "辽阳市", value: 0, code: "211000", select: { disabled: false }, selected: false },
  { name: "盘锦市", value: 0, code: "211100", select: { disabled: false }, selected: false },
  { name: "铁岭市", value: 0, code: "211200", select: { disabled: false }, selected: false },
  { name: "朝阳市", value: 0, code: "211300", select: { disabled: false }, selected: false },
  { name: "葫芦岛市", value: 0, code: "211400", select: { disabled: false }, selected: false },
]);
const cityConfig = ref({
  // 模块顶部城市筛选-聚合
  houseTradeSituationAnalysisForecast: cityObj.value.code, // 房屋交易情况分析预测-city
  houseTradeSituationAnalysisForecastR: cityObj.value.code, // 房屋交易情况分析预测-city
  macroEconomyToHouseImpactAnalysis: cityObj.value.code, // 宏观经济指标对房屋影响分析-city
  macroEconomyToHousePropertyMarket: cityObj.value.code, // 宏观经济指标对房地产市场影响预期变动分析-city
});
const magnifyData = ref({
  // chart图放大data
  dialogVisible: false,
  componentName: "",
  componentParams: {},
  dialogWidth: "",
  props: {},
  dialogTop: "",
  moduleName: "",
});

const wholeProvinceHouseAveragePriceTrend1 = ref({
  xAxisData: [],
  seriesData: [],
  legendData: [],
  yAxisName: "万平方米",
  yAxisRightName: "增长率"
});
const wholeProvinceHouseAveragePriceTrend2 = ref({
  xAxisData: [],
  seriesData: [],
  legendData: [],
  yAxisName: "万元",
  yAxisRightName: "增长率"
});
const wholeProvinceHouseAveragePriceTrend3 = ref({
  xAxisData: [],
  seriesData: [],
  legendData: [],
  yAxisName: "套",
  yAxisRightName: "增长率"
});
const wholeProvinceHouseAveragePriceTrend4 = ref({
  xAxisData: [],
  seriesData: [],
  legendData: [],
  yAxisName: "元",
  yAxisRightName: "增长率"
});
const wholeProvinceHouseAveragePriceTrendR1 = ref({
  xAxisData: [],
  seriesData: [],
  legendData: [],
  yAxisName: "万平方米",
  yAxisRightName: "增长率"
});
const wholeProvinceHouseAveragePriceTrendR2 = ref({
  xAxisData: [],
  seriesData: [],
  legendData: [],
  yAxisName: "万元",
  yAxisRightName: "增长率"
});
const wholeProvinceHouseAveragePriceTrendR3 = ref({
  xAxisData: [],
  seriesData: [],
  legendData: [],
  yAxisName: "套",
  yAxisRightName: "增长率"
});
const wholeProvinceHouseAveragePriceTrendR4 = ref({
  xAxisData: [],
  seriesData: [],
  legendData: [],
  yAxisName: "元",
  yAxisRightName: "增长率"
});
const wholeProvinceHouseAveragePriceTrendR5 = ref({
  xAxisData: [],
  seriesData: [],
  yAxisName: "套",
  forecastIndex: 0,
});
const wholeProvinceHouseAveragePriceTrendR6 = ref({
  xAxisData: [],
  seriesData: [],
  yAxisName: "元",
  forecastIndex: 0,
});
const wholeProvinceHouseAveragePriceTrendDomRef = ref(null); // 商品房交易情况分析预测1234chart图、二手房交易情况分析预测123456chart图-domref

const houseAveragePriceTrendAnalysisForecast = ref({
  //  商品房均价走势分析预测-data
  xAxisData: [],
  seriesData: [],
  yAxisName: "元",
  forecastIndex: 0,
});
const houseAveragePriceTrendAnalysisForecastDomRef = ref(null); // 商品房均价走势分析预测-domref

const houseBusinessVolumeTrendAnalysisForecast = ref({
  //  商品房交易量走势分析预测-data
  xAxisData: [],
  seriesData: [],
  yAxisName: "套",
  forecastIndex: 0,
});
const houseBusinessVolumeTrendAnalysisForecastDomRef = ref(null); // 商品房交易量走势分析预测-domref

const marcoEconomyToHouseImpactAnalysisTabs = ref([
  {
    id: 1,
    label: "GDP",
    unit: "亿",
  },
  {
    id: 2,
    label: "人均GDP",
    unit: "元",
  },
  {
    id: 3,
    label: "人口自然增长率",
    unit: "%",
  },
  {
    id: 4,
    label: "就业率",
    unit: "%",
  },
]);

const macroEconomyToHouseAveragePriceConnection = ref({
  // 宏观经济指标对房屋影响分析-宏观经济指标与房屋均价关系-data
  xAxisData: [],
  seriesData: [],
  legendData: [],
  yAxisName: "元",
  yAxisRightName: "GDP(亿)",
  currentTab: 1,
});
const macroEconomyToHouseAveragePriceConnectionDomRef = ref(null); // 宏观经济指标对房屋影响分析-宏观经济指标与房屋均价关系-domref

const macroEconomyToHouseBusinessVolumeConnection = ref({
  // 宏观经济指标对房屋影响分析-宏观经济指标与房屋交易量关系-data
  xAxisData: [],
  seriesData: [],
  legendData: [],
  yAxisName: "万套",
  yAxisRightName: "GDP(亿)",
  currentTab: 1,
});
const macroEconomyToHouseBusinessVolumeConnectionDomRef = ref(null); // 宏观经济指标对房屋影响分析-宏观经济指标与房屋交易量关系-domref

const macroEconomyToHousePropertyMarketTopInfoDefaultValueArray = ref([1, 10, 10]); // 宏观经济指标对房地产市场影响预期变动分析-顶部筛选模-默认值
const macroEconomyToHousePropertyMarketTopInfo = ref([
  // 宏观经济指标对房地产市场影响预期变动分析-顶部筛选模块
  {
    label: "GDP",
    unit: "亿",
    value: 1,
    step: 0.1,
    min: 0
  },
  {
    label: "人均GDP",
    unit: "元",
    value: 10,
    step: 1,
    min: 0
  },
  {
    label: "人口",
    unit: "万",
    value: 10,
    step: 1,
    min: 0
    // min: '-Infinity' // 最小值负无穷
  }
]);

const houseAveragePriceTrendForecastAnalysis = ref({
  //  宏观经济指标对房地产市场影响预期变动分析-房屋均价走势预测分析-data
  xAxisData: [],
  seriesData: [],
  yAxisName: "元",
  forecastIndex: 0,
  legendData: [],
});
const houseAveragePriceTrendForecastAnalysisDomRef = ref(null); // 宏观经济指标对房地产市场影响预期变动分析-房屋均价走势预测分析-domref

const houseBusinessVolumeTrendForecastAnalysis = ref({
  //  宏观经济指标对房地产市场影响预期变动分析-房屋交易量走势预测分析-data
  xAxisData: [],
  seriesData: [],
  yAxisName: "万套",
  forecastIndex: 0,
  legendData: [],
});
const houseBusinessVolumeTrendForecastAnalysisDomRef = ref(null); // 宏观经济指标对房地产市场影响预期变动分析-房屋交易量走势预测分析-domref

const changeCity = (cityCode, type) => {
  // 模块切换城市
  cityConfig.value[type] = cityCode;
  switch (type) {
    case "houseTradeSituationAnalysisForecast": // 商品房交易情况分析预测
      getWholeProvinceHouseAveragePriceTrendData(1); // 商品房交易面积走势
      getWholeProvinceHouseAveragePriceTrendData(2); // 商品房交易总金额走势
      getWholeProvinceHouseAveragePriceTrendData(3); // 商品房交易量走势
      getWholeProvinceHouseAveragePriceTrendData(4); // 商品房均价走势
      getHouseBusinessVolumeTrendAnalysisForecastData(); // 商品房交易量走势分析预测
      getHouseAveragePriceTrendAnalysisForecastData(); // 商品房均价走势分析预测
      break;
    case "houseTradeSituationAnalysisForecastR": // 二手房交易情况分析预测
      getWholeProvinceHouseAveragePriceTrendDataR(1); // 二手房交易面积走势
      getWholeProvinceHouseAveragePriceTrendDataR(2); // 二手房交易总金额走势
      getWholeProvinceHouseAveragePriceTrendDataR(3); // 二手房交易量走势
      getWholeProvinceHouseAveragePriceTrendDataR(4); // 二手房均价走势
      getWholeProvinceHouseAveragePriceTrendDataR(5); // 二手房交易量走势分析预测
      getWholeProvinceHouseAveragePriceTrendDataR(6); // 二手房均价走势分析预测
      break;
    case "macroEconomyToHouseImpactAnalysis": // 宏观经济指标对房屋影响分析
      getMacroEconomyToHouseAveragePriceConnectionData(); // 宏观经济指标对房屋影响分析-宏观经济指标与房屋均价关系
      getMacroEconomyToHouseBusinessVolumeConnectionData(); // 宏观经济指标对房屋影响分析-宏观经济指标与房屋交易量关系
      break;
    case "macroEconomyToHousePropertyMarket": // 宏观经济指标对房地产市场影响预期变动分析
      getMacroEconomyToHousePropertyMarketTopInfoDefaultData(true); // 宏观经济指标对房地产市场影响预期变动分析-接口获取顶部筛选默认值
      break;
  }
};

const handleCityPermission = (cityCode) => {
  // 处理城市权限
  if (cityCode) {
    cityObj.value.code = cityCode;
    Object.keys(cityConfig.value).forEach((x) => {
      cityConfig.value[x] = cityCode;
    });
  }
  if (cityCode !== "210000") {
    // 单市
    cityObj.value.name = mapList.value.find((x) => x.code === cityCode)?.name;
    mapList.value.forEach((x) => {
      if (x.code === cityCode) {
        x.selected = true;
      } else {
        x.select.disabled = true;
      }
    });
  }
};

const getWholeProvinceHouseAveragePriceTrendData = (type) => {
  // 商品房交易面积/总金额/交易量/均价走势-getdata
  wholeProvinceHouseAveragePriceTrend1.value.xAxisData = [];
  wholeProvinceHouseAveragePriceTrend1.value.seriesData = [[], []];
  wholeProvinceHouseAveragePriceTrend2.value.xAxisData = [];
  wholeProvinceHouseAveragePriceTrend2.value.seriesData = [[], []];
  wholeProvinceHouseAveragePriceTrend3.value.xAxisData = [];
  wholeProvinceHouseAveragePriceTrend3.value.seriesData = [[], []];
  wholeProvinceHouseAveragePriceTrend4.value.xAxisData = [];
  wholeProvinceHouseAveragePriceTrend4.value.seriesData = [[], []];
  transactionAnalysisAveragePriceTrend({
    type,
    xzqhdm: cityConfig.value.houseTradeSituationAnalysisForecast == "" ? "210000" : cityConfig.value.houseTradeSituationAnalysisForecast,
  })
    .then((res) => {
      const resData = res?.data;
      if (resData?.x?.length) {
        if (type == 1) {
          wholeProvinceHouseAveragePriceTrend1.value.legendData = [
            {
              name: "万平方米",
              icon: "rect",
            },
            {
              name: "增长率",
              icon: "rect",
            },
          ];
          wholeProvinceHouseAveragePriceTrend1.value.xAxisData = resData?.x;
          wholeProvinceHouseAveragePriceTrend1.value.seriesData = [
            resData?.y,
            resData?.y1?.map((x) => {
              return {
                value: x,
                unit: "%",
              };
            }),
          ];
        }
        if (type == 2) {
          wholeProvinceHouseAveragePriceTrend2.value.legendData = [
            {
              name: "万元",
              icon: "rect",
            },
            {
              name: "增长率",
              icon: "rect",
            },
          ];
          wholeProvinceHouseAveragePriceTrend2.value.xAxisData = resData?.x;
          wholeProvinceHouseAveragePriceTrend2.value.seriesData = [
            resData?.y,
            resData?.y1?.map((x) => {
              return {
                value: x,
                unit: "%",
              };
            }),
          ];
        }
        if (type == 3) {
          wholeProvinceHouseAveragePriceTrend3.value.legendData = [
            {
              name: "套",
              icon: "rect",
            },
            {
              name: "增长率",
              icon: "rect",
            },
          ];
          wholeProvinceHouseAveragePriceTrend3.value.xAxisData = resData?.x;
          wholeProvinceHouseAveragePriceTrend3.value.seriesData = [
            resData?.y,
            resData?.y1?.map((x) => {
              return {
                value: x,
                unit: "%",
              };
            }),
          ];
        }
        if (type == 4) {
          wholeProvinceHouseAveragePriceTrend4.value.legendData = [
            {
              name: "元",
              icon: "rect",
            },
            {
              name: "增长率",
              icon: "rect",
            },
          ];
          wholeProvinceHouseAveragePriceTrend4.value.xAxisData = resData?.x;
          wholeProvinceHouseAveragePriceTrend4.value.seriesData = [
            resData?.y,
            resData?.y1?.map((x) => {
              return {
                value: x,
                unit: "%",
              };
            }),
          ];
        }
      }
    })
    .finally((_) => {
/*      if (wholeProvinceHouseAveragePriceTrendDomRef.value) {
        nextTick(() => {
          wholeProvinceHouseAveragePriceTrendDomRef.value?.updateChart();
        });
      }*/
    });
};

const getWholeProvinceHouseAveragePriceTrendDataR = (type) => {
  // 二手房交易面积/总金额/交易量/均价走势/交易量走势分析预测/二手房均价走势分析预测-getdata
  wholeProvinceHouseAveragePriceTrendR1.value.xAxisData = [];
  wholeProvinceHouseAveragePriceTrendR1.value.seriesData = [[], []];
  wholeProvinceHouseAveragePriceTrendR2.value.xAxisData = [];
  wholeProvinceHouseAveragePriceTrendR2.value.seriesData = [[], []];
  wholeProvinceHouseAveragePriceTrendR3.value.xAxisData = [];
  wholeProvinceHouseAveragePriceTrendR3.value.seriesData = [[], []];
  wholeProvinceHouseAveragePriceTrendR4.value.xAxisData = [];
  wholeProvinceHouseAveragePriceTrendR4.value.seriesData = [[], []];
  wholeProvinceHouseAveragePriceTrendR5.value.xAxisData = [];
  wholeProvinceHouseAveragePriceTrendR5.value.seriesData = [[], []];
  wholeProvinceHouseAveragePriceTrendR6.value.xAxisData = [];
  wholeProvinceHouseAveragePriceTrendR6.value.seriesData = [[], []];
  selectTwoBuildInfo({
    type,
    xzqhdm: cityConfig.value.houseTradeSituationAnalysisForecastR == "" ? "210000" : cityConfig.value.houseTradeSituationAnalysisForecastR,
  })
    .then((res) => {
      const resData = res?.data;
      if (resData?.x?.length) {
        if (type == 1) {
          wholeProvinceHouseAveragePriceTrendR1.value.legendData = [
            {
              name: "万平方米",
              icon: "rect",
            },
            {
              name: "增长率",
              icon: "rect",
            },
          ];
          wholeProvinceHouseAveragePriceTrendR1.value.xAxisData = resData?.x;
          wholeProvinceHouseAveragePriceTrendR1.value.seriesData = [
            resData?.y,
            resData?.y1?.map((x) => {
              return {
                value: x,
                unit: "%",
              };
            }),
          ];
        }
        if (type == 2) {
          wholeProvinceHouseAveragePriceTrendR2.value.legendData = [
            {
              name: "万元",
              icon: "rect",
            },
            {
              name: "增长率",
              icon: "rect",
            },
          ];
          wholeProvinceHouseAveragePriceTrendR2.value.xAxisData = resData?.x;
          wholeProvinceHouseAveragePriceTrendR2.value.seriesData = [
            resData?.y,
            resData?.y1?.map((x) => {
              return {
                value: x,
                unit: "%",
              };
            }),
          ];
        }
        if (type == 3) {
          wholeProvinceHouseAveragePriceTrendR3.value.legendData = [
            {
              name: "套",
              icon: "rect",
            },
            {
              name: "增长率",
              icon: "rect",
            },
          ];
          wholeProvinceHouseAveragePriceTrendR3.value.xAxisData = resData?.x;
          wholeProvinceHouseAveragePriceTrendR3.value.seriesData = [
            resData?.y,
            resData?.y1?.map((x) => {
              return {
                value: x,
                unit: "%",
              };
            }),
          ];
        }
        if (type == 4) {
          wholeProvinceHouseAveragePriceTrendR4.value.legendData = [
            {
              name: "元",
              icon: "rect",
            },
            {
              name: "增长率",
              icon: "rect",
            },
          ];
          wholeProvinceHouseAveragePriceTrendR4.value.xAxisData = resData?.x;
          wholeProvinceHouseAveragePriceTrendR4.value.seriesData = [
            resData?.y,
            resData?.y1?.map((x) => {
              return {
                value: x,
                unit: "%",
              };
            }),
          ];
        }
        if (type == 5) {
          wholeProvinceHouseAveragePriceTrendR5.value.xAxisData = resData?.x;
          wholeProvinceHouseAveragePriceTrendR5.value.forecastIndex = resData?.y?.length - 1;
          wholeProvinceHouseAveragePriceTrendR5.value.seriesData = [resData?.y, resData?.y1];
        }
        if (type == 6) {
          wholeProvinceHouseAveragePriceTrendR6.value.xAxisData = resData?.x;
          wholeProvinceHouseAveragePriceTrendR6.value.forecastIndex = resData?.y?.length - 1;
          wholeProvinceHouseAveragePriceTrendR6.value.seriesData = [resData?.y, resData?.y1];
        }
      }
    })
    .finally((_) => {
/*      if (wholeProvinceHouseAveragePriceTrendDomRef.value) {
        nextTick(() => {
          wholeProvinceHouseAveragePriceTrendDomRef.value?.updateChart();
        });
      }*/
    });
};

const getHouseAveragePriceTrendAnalysisForecastData = () => {
  // 商品房均价走势分析预测-getdata
  houseAveragePriceTrendAnalysisForecast.value.xAxisData = [];
  houseAveragePriceTrendAnalysisForecast.value.seriesData = [[], []];
  transactionAnalysisAveragePriceForecast({ xzqhdm: cityConfig.value.houseTradeSituationAnalysisForecast })
    .then((res) => {
      const resData = res?.data;
      if (resData?.X?.length) {
        houseAveragePriceTrendAnalysisForecast.value.xAxisData = resData?.X;
        houseAveragePriceTrendAnalysisForecast.value.forecastIndex = resData?.Y?.length - 1;
        houseAveragePriceTrendAnalysisForecast.value.seriesData = [resData?.Y, resData?.Y1];
      }
    })
    .finally((_) => {
      if (houseAveragePriceTrendAnalysisForecastDomRef.value) {
        nextTick(() => {
          houseAveragePriceTrendAnalysisForecastDomRef.value?.updateChart();
        });
      }
    });
};

const getHouseBusinessVolumeTrendAnalysisForecastData = () => {
  // 商品房交易量走势分析预测-getdata
  houseBusinessVolumeTrendAnalysisForecast.value.xAxisData = [];
  houseBusinessVolumeTrendAnalysisForecast.value.seriesData = [[], []];
  transactionAnalysisTradingVolumeForecast({ xzqhdm: cityConfig.value.houseTradeSituationAnalysisForecast })
    .then((res) => {
      const resData = res?.data;
      if (resData?.X?.length) {
        houseBusinessVolumeTrendAnalysisForecast.value.xAxisData = resData?.X;
        houseBusinessVolumeTrendAnalysisForecast.value.forecastIndex = resData?.Y?.length - 1;
        houseBusinessVolumeTrendAnalysisForecast.value.seriesData = [resData?.Y, resData?.Y1];
      }
    })
    .finally((_) => {
      if (houseBusinessVolumeTrendAnalysisForecastDomRef.value) {
        nextTick(() => {
          houseBusinessVolumeTrendAnalysisForecastDomRef.value?.updateChart();
        });
      }
    });
};

const getMacroEconomyToHouseAveragePriceConnectionData = () => {
  // 宏观经济指标对房屋影响分析-宏观经济指标与房屋均价关系-getdata
  macroEconomyToHouseAveragePriceConnection.value.xAxisData = [];
  macroEconomyToHouseAveragePriceConnection.value.seriesData = [[], []];
  const tempObj = marcoEconomyToHouseImpactAnalysisTabs.value.find((x) => x.id === macroEconomyToHouseAveragePriceConnection.value.currentTab);
  macroeconomicIndicatorsHousing({
    xzqhdm: cityConfig.value.macroEconomyToHouseImpactAnalysis,
    dimension: macroEconomyToHouseAveragePriceConnection.value.currentTab,
  })
    .then((res) => {
      const resData = res?.data;
      if (resData?.X?.length) {
        macroEconomyToHouseAveragePriceConnection.value.legendData = [
          {
            name: "均价",
            icon: "rect",
          },
          {
            name: tempObj?.label,
            icon: "rect",
          },
        ];
        macroEconomyToHouseAveragePriceConnection.value.xAxisData = resData?.X;
        macroEconomyToHouseAveragePriceConnection.value.seriesData = [
          resData?.Y,
          resData?.Y1?.map((x) => {
            return {
              value: x,
              unit: tempObj?.unit,
            };
          }),
        ];
      }
    })
    .finally((_) => {
      if (macroEconomyToHouseAveragePriceConnectionDomRef.value) {
        nextTick(() => {
          macroEconomyToHouseAveragePriceConnectionDomRef.value?.updateChart();
        });
      }
    });
};

const getMacroEconomyToHouseBusinessVolumeConnectionData = () => {
  // 宏观经济指标对房屋影响分析-宏观经济指标与房屋交易量关系-getdata
  macroEconomyToHouseBusinessVolumeConnection.value.xAxisData = [];
  macroEconomyToHouseBusinessVolumeConnection.value.seriesData = [[], []];
  const tempObj = marcoEconomyToHouseImpactAnalysisTabs.value.find((x) => x.id === macroEconomyToHouseBusinessVolumeConnection.value.currentTab);
  macroeconomicTransactionHousing({
    xzqhdm: cityConfig.value.macroEconomyToHouseImpactAnalysis,
    dimension: macroEconomyToHouseBusinessVolumeConnection.value.currentTab,
  })
    .then((res) => {
      const resData = res?.data;
      if (resData?.X?.length) {
        macroEconomyToHouseBusinessVolumeConnection.value.legendData = [
          {
            name: "交易量",
            icon: "rect",
          },
          {
            name: tempObj?.label,
            icon: "rect",
          },
        ];
        macroEconomyToHouseBusinessVolumeConnection.value.xAxisData = resData?.X;
        macroEconomyToHouseBusinessVolumeConnection.value.seriesData = [
          resData?.Y,
          resData?.Y1?.map((x) => {
            return {
              value: x,
              unit: tempObj?.unit,
            };
          }),
        ];
      }
    })
    .finally((_) => {
      if (macroEconomyToHouseBusinessVolumeConnectionDomRef.value) {
        nextTick(() => {
          macroEconomyToHouseBusinessVolumeConnectionDomRef.value?.updateChart();
        });
      }
    });
};

const getMacroEconomyToHousePropertyMarketTopInfoDefaultData = (isInit) => {
  // 宏观经济指标对房地产市场影响预期变动分析-宏观经济指标对房地产市场影响预期变动分析-获取顶部筛选模块默认展示值
  defaultParameterSEachLevel({ xzqhdm: cityConfig.value.macroEconomyToHousePropertyMarket })
    .then((res) => {
      const resData = res?.data;
      if (Object.keys(resData)?.length) {
        macroEconomyToHousePropertyMarketTopInfoDefaultValueArray.value[0] = resData?.gdp; // GDP
        macroEconomyToHousePropertyMarketTopInfoDefaultValueArray.value[1] = resData?.rjgdp; // 人均GDP
        macroEconomyToHousePropertyMarketTopInfoDefaultValueArray.value[2] = resData?.rk; // 人口
      }
    })
    .catch((error) => {
      console.log(error);
    })
    .finally((_) => {
      resetMacroEconomyToHousePropertyMarketTopInfoValue(isInit);
    });
};

const getHouseAveragePriceTrendForecastAnalysisData = (isInit) => {
  // 宏观经济指标对房地产市场影响预期变动分析-房屋均价走势预测分析
  macroeconomicImpact({
    xzqh: cityConfig.value.macroEconomyToHousePropertyMarket === '210000' ? '辽宁省' : mapList.value.find(x => x.code === cityConfig.value.macroEconomyToHousePropertyMarket).name,
    xzqhdm: cityConfig.value.macroEconomyToHousePropertyMarket,
    gdp: macroEconomyToHousePropertyMarketTopInfo.value[0].value || undefined,
    rjgdp: macroEconomyToHousePropertyMarketTopInfo.value[1].value || undefined,
    rk: macroEconomyToHousePropertyMarketTopInfo.value[2].value || undefined
  })
    .then((res) => {
      const resData = res?.data;
      if (resData?.X?.length) {
        houseAveragePriceTrendForecastAnalysis.value.xAxisData = resData?.X;
        houseAveragePriceTrendForecastAnalysis.value.seriesData = [resData?.Y, resData?.Y1];
        houseAveragePriceTrendForecastAnalysis.value.legendData = ["实际走势", "时间序列预测"];
        if (!isInit) {
          houseAveragePriceTrendForecastAnalysis.value.legendData.push("预期变动");
          houseAveragePriceTrendForecastAnalysis.value.seriesData.push(resData?.Y2);
        }
        houseAveragePriceTrendForecastAnalysis.value.forecastIndex = resData?.Y?.length - 1;
      }
    })
    .finally((_) => {
      if (houseAveragePriceTrendForecastAnalysisDomRef.value) {
        nextTick(() => {
          houseAveragePriceTrendForecastAnalysisDomRef.value?.updateChart();
        });
      }
    });
};

const getHouseBusinessVolumeTrendForecastAnalysisData = (isInit) => {
  // 宏观经济指标对房地产市场影响预期变动分析-房屋交易量走势预测分析
  macroeconomicImpactTradingVolume({
    xzqh: cityConfig.value.macroEconomyToHousePropertyMarket === '210000' ? '辽宁省' : mapList.value.find(x => x.code === cityConfig.value.macroEconomyToHousePropertyMarket).name,
    xzqhdm: cityConfig.value.macroEconomyToHousePropertyMarket,
    gdp: macroEconomyToHousePropertyMarketTopInfo.value[0].value || undefined,
    rjgdp: macroEconomyToHousePropertyMarketTopInfo.value[1].value || undefined,
    rk: macroEconomyToHousePropertyMarketTopInfo.value[2].value || undefined
  })
    .then((res) => {
      const resData = res?.data;
      if (resData?.X?.length) {
        houseBusinessVolumeTrendForecastAnalysis.value.xAxisData = resData?.X;
        houseBusinessVolumeTrendForecastAnalysis.value.seriesData = [resData?.Y, resData?.Y1];
        houseBusinessVolumeTrendForecastAnalysis.value.legendData = ["实际走势", "时间序列预测"];
        if (!isInit) {
          houseBusinessVolumeTrendForecastAnalysis.value.legendData.push("预期变动");
          houseBusinessVolumeTrendForecastAnalysis.value.seriesData.push(resData?.Y2);
        }
        houseBusinessVolumeTrendForecastAnalysis.value.forecastIndex = resData?.Y?.length - 1;
      }
    })
    .finally((_) => {
      if (houseBusinessVolumeTrendForecastAnalysisDomRef.value) {
        nextTick(() => {
          houseBusinessVolumeTrendForecastAnalysisDomRef.value?.updateChart();
        });
      }
    });
};

const fullSc = (componentName, componentParams, moduleName) => {
  // 放大chart图
  magnifyData.value.dialogTop = "25vh";
  magnifyData.value.dialogVisible = true;
  magnifyData.value.componentName = componentName;
  magnifyData.value.moduleName = moduleName;
  switch (componentName) {
    case "singleLine": // 单折线图
      magnifyData.value.props = {
        lineData: componentParams,
        class: "h150 dialog-h150",
      };
      magnifyData.value.dialogWidth = "60%";
      magnifyData.value.dialogTop = "15vh";
      break;
    case "bar": // 单柱形图
      magnifyData.value.props = {
        barData: componentParams,
        class: "h150 dialog-h150",
      };
      magnifyData.value.dialogWidth = "60%";
      magnifyData.value.dialogTop = "15vh";
      break;
    case "lineWithMarkArea": // 带markarea的折线图
      magnifyData.value.props = {
        lineData: componentParams,
        class: "h160 dialog-h160",
      };
      magnifyData.value.dialogWidth = "60%";
      magnifyData.value.dialogTop = "15vh";
      break;
    case "doubleLine": // 双折现图
      magnifyData.value.props = {
        lineData: componentParams,
        class: "h135 dialog-h135",
      };
      magnifyData.value.dialogWidth = "60%";
      magnifyData.value.dialogTop = "15vh";
      break;
    case "lineWithMarkAreaMacroEconomy": // 带markarea的多折线图
      magnifyData.value.props = {
        lineData: componentParams,
        class: "h120 dialog-h120",
      };
      magnifyData.value.dialogWidth = "60%";
      magnifyData.value.dialogTop = "15vh";
      break;
    case "pie": // pie图
      magnifyData.value.props = {
        pieData: componentParams,
        class: "h135 dialog-h135",
      };
      magnifyData.value.dialogWidth = "50%";
      magnifyData.value.dialogTop = "15vh";
      break;
  }
};

const changeMarcoEconomyToHouseImpactAnalysisTab = (type) => {
  // 宏观经济指标对房屋影响分析-change-tab
  if (type === "left") {
    const tempObj = marcoEconomyToHouseImpactAnalysisTabs.value.find((x) => x.id === macroEconomyToHouseAveragePriceConnection.value.currentTab);
    macroEconomyToHouseAveragePriceConnection.value.yAxisRightName = `${tempObj?.label}(${tempObj?.unit})`;
    getMacroEconomyToHouseAveragePriceConnectionData();
  } else {
    const tempObj = marcoEconomyToHouseImpactAnalysisTabs.value.find((x) => x.id === macroEconomyToHouseBusinessVolumeConnection.value.currentTab);
    macroEconomyToHouseBusinessVolumeConnection.value.yAxisRightName = `${tempObj?.label}(${tempObj?.unit})`;
    getMacroEconomyToHouseBusinessVolumeConnectionData();
  }
};

const handleMacroEconomyOperation = () => {
  // 宏观经济指标对房地产市场影响预期变动分析-按钮
  getMacroEconomyToHousePropertyMarketTopInfoDefaultData(true); // 宏观经济指标对房地产市场影响预期变动分析-接口获取顶部筛选默认值
};

const mapNameChange = (data) => {
  // 地图点击触发
  cityObj.value.name = cityObj.value.name == data.cityName ? "" : data.cityName;
  cityObj.value.code = cityObj.value.code == data.cityCode ? "210000" : data.cityCode;
  Object.keys(cityConfig.value).forEach((x) => {
    cityConfig.value[x] = cityObj.value.code;
  });

  mapList.value.forEach((x) => {
    if (x.code === data.cityCode) {
      x.selected = true;
      if (data.cancelCurrentCity) {
        x.selected = false;
      }
    } else {
      x.selected = false;
    }
  });

  initPage();
};

const changeInputNumber = useDebounce((event, index) => {
  // 宏观经济指标对房地产市场影响预期变动分析-更改input-number值
  getHouseAveragePriceTrendForecastAnalysisData(); // 宏观经济指标对房地产市场影响预期变动分析-房屋均价走势预测分析
  getHouseBusinessVolumeTrendForecastAnalysisData(); // 宏观经济指标对房地产市场影响预期变动分析-房屋交易量走势预测分析
}, 500);

const resetMacroEconomyToHousePropertyMarketTopInfoValue = (isInit) => {
  // 重置数据-宏观经济指标对房地产市场影响预期变动分析-顶部筛选
  macroEconomyToHousePropertyMarketTopInfoDefaultValueArray.value.forEach((x, i) => {
    macroEconomyToHousePropertyMarketTopInfo.value[i].value = x;
  });
  getHouseAveragePriceTrendForecastAnalysisData(isInit); // 宏观经济指标对房地产市场影响预期变动分析-房屋均价走势预测分析
  getHouseBusinessVolumeTrendForecastAnalysisData(isInit); // 宏观经济指标对房地产市场影响预期变动分析-房屋交易量走势预测分析
};

const initPage = () => {
  getWholeProvinceHouseAveragePriceTrendData(1); // 商品房交易面积走势
  getWholeProvinceHouseAveragePriceTrendData(2); // 商品房交易总金额走势
  getWholeProvinceHouseAveragePriceTrendData(3); // 商品房交易量走势
  getWholeProvinceHouseAveragePriceTrendData(4); // 商品房均价走势
  getHouseBusinessVolumeTrendAnalysisForecastData(); // 商品房交易量走势分析预测
  getHouseAveragePriceTrendAnalysisForecastData(); // 商品房均价走势分析预测

  getWholeProvinceHouseAveragePriceTrendDataR(1); // 二手房交易面积走势
  getWholeProvinceHouseAveragePriceTrendDataR(2); // 二手房交易总金额走势
  getWholeProvinceHouseAveragePriceTrendDataR(3); // 二手房交易量走势
  getWholeProvinceHouseAveragePriceTrendDataR(4); // 二手房均价走势
  getWholeProvinceHouseAveragePriceTrendDataR(5); // 二手房交易量走势分析预测
  getWholeProvinceHouseAveragePriceTrendDataR(6); // 二手房均价走势分析预测

  getMacroEconomyToHouseAveragePriceConnectionData(); // 宏观经济指标对房屋影响分析-宏观经济指标与房屋均价关系
  getMacroEconomyToHouseBusinessVolumeConnectionData(); // 宏观经济指标对房屋影响分析-宏观经济指标与房屋交易量关系

  getMacroEconomyToHousePropertyMarketTopInfoDefaultData(true); // 宏观经济指标对房地产市场影响预期变动分析-宏观经济指标对房地产市场影响预期变动分析-获取顶部筛选模块默认展示值
};

onBeforeMount(() => {
  const permissionCityCode = localStorage.getItem("cityCode");
  if (permissionCityCode) handleCityPermission(permissionCityCode);
});

onMounted(() => {
  const date = new Date();
  currentYear.value = date.getFullYear();
  const tempCurrentMonth = date.getMonth() + 1;
  currentMonth.value = tempCurrentMonth < 10 ? `0${tempCurrentMonth}` : `${tempCurrentMonth}`;
  initPage();
});
</script>

<style scoped lang="less">
.h100 {
  height: 143px;
}
.h145 {
  height: 150px;
}
.h200 {
  height: 220px;
  margin-bottom: 63px;
}
.main-page {
  width: 100vw;
  height: 100vh;
  background-image: url("@/assets/img/housePropertyAnalysis/statistics/page-bg.png");
  background-size: 100% 100%;
  color: #fff;
  overflow: hidden;

  .page-title {
    width: 100vw;
    height: 85px;
    margin-bottom: 17px;
    background: url("@/assets/img/housePropertyAnalysisAndForecast/header-bg.png");
    background-size: 100% 100%;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 48px;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    > span {
      font-size: 30px;
      margin-bottom: 20px;
      text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.6);
    }
  }

  .main-content {
    width: 100vw;
    padding: 0 50px;
    box-sizing: border-box;
    height: calc(100vh - 111px);

    .main-content-gird-title {
      width: 100%;
      display: flex;
      align-items: center;

      &-logo {
        width: 20px;
        height: 20px;
        margin-right: 6px;
      }

      p {
        font-size: 18px;
      }

      &-economic-statistics {
        display: flex;
        align-items: center;
      }
    }

    .module-title-content-middle-line {
      width: 100%;
      border: 1px solid;
      margin: 6px 0;
      border-image: linear-gradient(
          297deg,
          rgba(97, 228, 255, 0),
          rgba(50, 197, 255, 1),
          rgba(102, 255, 255, 1),
          rgba(50, 197, 255, 1),
          rgba(50, 197, 255, 0)
        )
        1 1;
    }

    .public-chart-title {
      font-size: 12px;
      margin-top: 15px;
    }

    .middle-map {
      height: 340px;

      .map-address {
        position: absolute;
        top: 0px;
        left: 0px;
        letter-spacing: 1px;
        text-shadow: 0px 1px 2px #c1731c;
        font-size: 18px;
        color: #60f9f4;
        letter-spacing: 1.2px;
        margin-left: 27px;
      }

      .map-address::before {
        content: "";
        position: absolute;
        top: 2px;
        left: -27px;
        width: 20px;
        height: 20px;
        background: url("@/assets/img/personInfor/map-address.png");
        background-size: 100% 100%;
      }

      .date-filtrate {
        position: absolute;
        top: 0px;
        right: 0px;
        display: flex;
        height: 30px;
      }
    }

    :deep(.el-tabs) {
      margin-top: 5px;
      height: 25px;
      display: flex;
      align-items: center;
      justify-content: center;

      .el-tabs__header {
        margin: 0;
      }

      .el-tabs__nav-wrap:after {
        height: 0;
      }

      .el-tabs__active-bar {
        height: 0;
      }

      .el-tabs__item {
        text-align: center;
        padding: 0 10px;
        font-size: 12px;
        height: 25px;
        box-shadow: inset 0px 0px 8px 0px #3d7fff;
        border-radius: 8px;
        cursor: pointer;
        color: white;
      }

      .el-tabs__item:not(:last-child) {
        margin-right: 5px;
      }

      .el-tabs__item.is-active {
        background: linear-gradient(60deg, #0e5fff 0%, #00ffff 100%);
      }
    }
  }

  .house-trade-situation-analysis-forecast {
    background: url("@/assets/img/housePropertyAnalysisAndForecast/module-bg.png");
    background-size: 100% 100%;
    padding: 16px 11px;
    height: 965px;
    box-sizing: border-box;
    position: relative;
    .house-trade-situation-analysis-forecast-right-top,
    .house-trade-situation-analysis-forecast-bottom {
      height: 185px;
    }
  }

  .marco-economy-to-house-impact-analysis {
    margin-top: 20px;
    background: url("@/assets/img/housePropertyAnalysisAndForecast/module-bg.png");
    background-size: 100% 100%;
    padding: 16px 11px;
    height: 280px;
    box-sizing: border-box;
    position: relative;

    &-content-tabs {
      position: relative;
    }
  }

  .marco-economy-to-house-property-market {
    margin-top: 20px;
    background: url("@/assets/img/housePropertyAnalysisAndForecast/module-bg.png");
    background-size: 100% 100%;
    padding: 16px 11px;
    height: 305px;
    box-sizing: border-box;
    position: relative;

    &-top-operation {
      display: flex;
      align-items: center;
      justify-content: space-around;

      &-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #0e81ff29;
        padding: 5px 10px;

        &__label {
          font-size: 16px;
          margin-bottom: 5px;
        }

        &__content {
          position: relative;
          display: flex;
          align-items: center;

          /deep/ .el-input-number {
            width: 90px;
            .el-input__wrapper {
              box-shadow: none;
              border: 1px solid #022a54;
              background-color: rgba(14, 129, 255, 0.4);
              padding: 0 32px 0 5px;
              .el-input__inner {
                color: white;
              }
            }
            > span[role="button"] {
              background-color: rgba(14, 129, 255, 0.4);
              box-sizing: content-box;
              .el-icon {
                color: #5cf4ff;
              }
            }
            > span[role="button"]:nth-of-type(1) {
              border-left: 2px solid #022a54;
              border-top: 1px solid #022a54;
            }
            > span[role="button"]:nth-of-type(2) {
              border-left: 2px solid #022a54;
              border-bottom: 1px solid #022a54;
            }
          }

          span {
            white-space: nowrap;
            margin-left: 5px;
            font-size: 12px;
          }
        }
      }

      &-btn {
        > div {
          cursor: pointer;
          color: white;
          border-radius: 5px;
          box-sizing: border-box;
          width: 68px;
          height: 24px;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 2px solid #3d9b9d;
          box-shadow: none;
          font-size: 12px;
        }
      }
    }
  }

  .stopped-suspended-project-analysis {
    background: url("@/assets/img/housePropertyAnalysisAndForecast/module-bg.png");
    background-size: 100% 100%;
    padding: 16px 11px;
    height: 410px;
    box-sizing: border-box;
    position: relative;

    &-tabs {
      position: relative;
    }
  }

  .inventory-situation-analysis {
    background: url("@/assets/img/housePropertyAnalysisAndForecast/module-bg.png");
    background-size: 100% 100%;
    padding: 16px 11px;
    height: 255px;
    box-sizing: border-box;
    position: relative;
    .inventory-situation-analysis-right-title {
      display: flex;
      justify-content: space-between;
      position: relative;
    }
    &-tabs {
      position: absolute;
      right: 0;
    }
    &-chart {
      height: 170px;
    }
  }

  .sales-cycle-situation-analysis {
    background: url("@/assets/img/housePropertyAnalysisAndForecast/module-bg.png");
    background-size: 100% 100%;
    padding: 16px 11px;
    height: 255px;
    box-sizing: border-box;
    position: relative;
    margin-top: 20px;
    .sales-cycle-situation-analysis-right-title {
      display: flex;
      justify-content: space-between;
      position: relative;
    }
    &-tabs {
      position: absolute;
      right: 0;
    }
  }
}

/deep/ .el-dialog {
  background-color: rgb(6, 37, 69);

  .el-dialog__close {
    color: white;
    font-size: 25px;
  }
}
.filtrate-city {
  width: 75px;
  /deep/ .el-select {
    .el-select__wrapper {
      background: #001a35 !important;
      box-shadow: inset 0px 0px 8px 0px #3d7fff;
      border-radius: 8px;
      border: 1px solid #1fb7ff;
    }
  }
}
</style>
